<template>
  <div>
    <el-container>
      <el-header>
        <div class="title" @click="router.push('/main')">
          <img src="@/assets/logo.png" alt="" />
          <span style="font-size: 20px">IZZE后台管理系统</span>
        </div>

        <!-- 试试饿了么的下拉菜单 -->
        <div class="avatar">
          <el-dropdown trigger="click">
            <div class="friend">
              <el-badge
                :value="pending.length"
                class="item"
                v-if="pending.length > 0"
              >
                <img style="height: 19px" src="@/assets/icon/tixing.png" />
              </el-badge>
              <img
                style="height: 19px"
                src="@/assets/icon/tixing.png"
                v-if="pending.length <= 0"
              />
              <span>待办</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <div
                  style="height: 200px; display: flex; justify-content: center"
                >
                  <el-tabs
                    style="width: 90%"
                    v-model="toDOtab"
                    class="demo-tabs"
                  >
                    <el-tab-pane label="待处理" name="first">
                      <div
                        class="friendItem"
                        v-for="item in pending"
                        @click="toDialog(item.followId, item.id)"
                      >
                        <div style="display: flex; flex-direction: column">
                          <span>{{ item.message }}</span>
                          <span style="color: #666; font-size: 9px">
                            {{ item.createTime.replace("T", " ") }}
                          </span>
                        </div>
                        <el-tag
                          class="ToDotag"
                          type="primary"
                          effect="dark"
                          v-if="item.type == 0"
                        >
                          通知
                        </el-tag>
                        <el-tag
                          class="ToDotag"
                          type="primary"
                          effect="dark"
                          v-if="item.type == 1"
                        >
                          申请
                        </el-tag>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="已同意" name="second">
                      <div
                        class="friendItem"
                        v-for="item in agreed"
                        @click="toDialog(item.followId, item.id)"
                      >
                        <div style="display: flex; flex-direction: column">
                          <span>{{ item.message }}</span>
                          <span style="color: #666; font-size: 9px">
                            {{ item.createTime.replace("T", " ") }}
                          </span>
                        </div>

                        <el-tag class="ToDotag" type="success" effect="dark">
                          同意
                        </el-tag>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="已拒绝" name="third">
                      <div
                        class="friendItem"
                        v-for="item in Rejected"
                        @click="toDialog(item.followId, item.id)"
                      >
                        <div style="display: flex; flex-direction: column">
                          <span>{{ item.message }}</span>
                          <span style="color: #666; font-size: 9px">
                            {{ item.createTime.replace("T", " ") }}
                          </span>
                        </div>

                        <el-tag class="ToDotag" type="danger" effect="dark">
                          拒绝
                        </el-tag>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown trigger="click" @click="searchUserList.length = 0">
            <div class="friend">
              <img style="height: 20px" src="@/assets/icon/haoyou.png" />
              <span>好友</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <div
                  style="height: 200px; display: flex; justify-content: center"
                >
                  <el-tabs
                    style="width: 90%"
                    v-model="activeName"
                    class="demo-tabs"
                  >
                    <el-tab-pane
                      style="display: flex; flex-direction: column"
                      label="好友列表"
                      name="first"
                    >
                      <div
                        class="friendItem"
                        v-for="item in friendList"
                        :key="item.id"
                        @click="openFriendDialog(item.id)"
                      >
                        <el-avatar
                          style="margin-left: 5px; height: 30px; width: 30px"
                          :src="item.avatar"
                        />
                        <span style="margin-left: 5px; font-weight: 1000">
                          {{ item.username }}
                        </span>
                      </div>
                      <div v-if="friendList.length == 0">您目前还没有好友</div>
                    </el-tab-pane>
                    <el-tab-pane label="搜索用户" name="second">
                      <div class="searchUser">
                        <div style="width: 100%; display: flex">
                          <el-input
                            style="width: 80%"
                            type="primary"
                            size="small"
                            placeholder="输入用户IZZEID或昵称"
                            v-model="searchValue"
                          ></el-input>
                          <el-button
                            type="primary"
                            size="small"
                            @click="searchUser"
                          >
                            <el-icon style="vertical-align: middle">
                              <Search />
                            </el-icon>
                          </el-button>
                        </div>
                        <div
                          class="friendItem"
                          v-for="item in searchUserList"
                          :key="item.id"
                          @click="openFriendDialog(item.id)"
                        >
                          <el-avatar
                            style="margin-left: 5px; height: 30px; width: 30px"
                            :src="item.avatar"
                          />
                          <span style="margin-left: 5px; font-weight: 1000">
                            {{ item.username }}
                          </span>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="好友申请" name="thired"> </el-tab-pane>
                  </el-tabs>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button style="margin-right: 20px" @click="newVideoDialog = true"
            >发布新内容</el-button
          >
          <el-dropdown>
            <el-avatar :src="user.avatar" />
            <template #dropdown>
              <el-dropdown-menu>
                <div class="userMessage">
                  <el-avatar :src="user.avatar" style="margin-left: 15px" />
                  <el-icon
                    style="
                      position: absolute;
                      top: 38px;
                      left: 43px;
                      color: pink;
                    "
                    v-if="user.gender == '女'"
                  >
                    <el-icon>
                      <Female />
                    </el-icon>
                  </el-icon>
                  <el-icon
                    style="
                      position: absolute;
                      top: 38px;
                      left: 43px;
                      color: #76daff;
                    "
                    v-if="user.gender == '男'"
                  >
                    <Male />
                  </el-icon>
                  <el-icon
                    style="
                      position: absolute;
                      top: 38px;
                      left: 43px;
                      color: #000;
                    "
                    v-if="user.gender == '保密'"
                  >
                    <Lock />
                  </el-icon>
                  <div
                    style="
                      display: flex;
                      flex-direction: column;
                      font-size: 10px;
                      margin-left: 8px;
                    "
                  >
                    <div
                      style="
                        display: flex;
                        position: absolute;
                        left: 65px;
                        top: 0px;
                      "
                    >
                      <span style="margin-right: 10px"
                        >用户名: {{ user.username }}</span
                      >
                      <span>手机号: {{ user.phone }}</span>
                    </div>
                    <div
                      style="
                        display: flex;
                        position: absolute;
                        left: 65px;
                        top: 20px;
                      "
                    >
                      <span style="margin-right: 10px"
                        >居住地: {{ user.location }}</span
                      >
                    </div>
                    <div
                      style="
                        display: flex;
                        position: absolute;
                        left: 65px;
                        top: 40px;
                      "
                    >
                      <span style="margin-right: 10px"
                        >邮箱: {{ user.email }}</span
                      >
                    </div>
                    <span style="position: absolute; right: 10px; top: 0px"
                      >粉丝数: {{ user.fans }}</span
                    >
                    <span style="position: absolute; right: 10px; top: 40px"
                      >id: {{ user.izzeCode }}</span
                    >
                  </div>
                </div>
                <el-dropdown-item
                  divided
                  v-for="item in userTab"
                  :key="item.sort"
                  @click="UserTabClick(item.id)"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <!-- 好友信息展示的dialog -->
    <!-- <el-dialog v-model="friendMessageDialogVisible" :title="friendMessage.username + '的个人信息'" width="800"
            draggable>
            <div class="friendDialogBox">
                <div class="friendMessage">
                    <el-avatar :src="friendMessage.avatar" style="height: 100px; width: 100px; margin-bottom: 10px;" />
                    <span style="width: 80%; border-bottom: 2px dashed #aaa;">
                        {{ friendMessage.sign == "" || friendMessage.sign == null ? '高冷的人都不会设置个性签名' : friendMessage.sign
                        }}
                    </span>
                    <div class="friendMessageContext">
                        <div class="friendMessageItem">
                            <div class="friendMessageItemContext">
                                <el-popover placement="top-start" :width="100" trigger="hover" content="总点赞数">
                                    <template #reference>
                                        <img src="@/assets/icon/xihuan.png" alt="">
                                    </template>
                                </el-popover>
                                <span>{{ friendMessage.praise }}</span>
                            </div>
                            <div class="friendMessageItemContext">
                                <el-popover placement="top-start" :width="100" trigger="hover" content="关注数">
                                    <template #reference>
                                        <img src="@/assets/icon/wodeguanzhu.png" alt="">
                                    </template>
                                </el-popover>
                                <span>{{ friendMessage.concern }}</span>
                            </div>
                            <div class="friendMessageItemContext">
                                <el-popover placement="top-start" :width="100" trigger="hover" content="粉丝数">
                                    <template #reference>
                                        <img src="@/assets/icon/wodefensi.png" alt="">
                                    </template>
                                </el-popover>
                                <span>{{ friendMessage.fans }}</span>
                            </div>
                        </div>
                        <div class="friendMessageItem">
                            <div class="friendMessageItemContext">
                                <img src="@/assets/icon/id.png" alt="">
                                <span>{{ friendMessage.izzeCode }}</span>
                            </div>
                            <div class="friendMessageItemContext">
                                <img src="@/assets/icon/phone.png" alt="">
                                <span>{{ friendMessage.phone }}</span>
                            </div>
                        </div>
                        <div class="friendMessageItem">
                            <div class="friendMessageItemContext">
                                <img src="@/assets/icon/school.png" alt="">
                                <span>{{ friendMessage.school }}</span>
                            </div>
                            <div class="friendMessageItemContext">
                                <img src="@/assets/icon/location.png" alt="">
                                <span>{{ friendMessage.location }}</span>
                            </div>
                        </div>
                        <div class="friendMessageItem">
                            <div class="friendMessageItemContext">
                                <img src="@/assets/icon/birthday.png" alt="">
                                <span>{{ friendMessage.birthday }}</span>
                            </div>
                            <div class="friendMessageItemContext">
                                <img src="@/assets/icon/join-date.png" alt="">
                                <span>{{ friendMessage.createTime }}</span>
                            </div>
                        </div>
                        <div class="friendMessageItem">
                            <div class="friendMessageItemContext">
                                <img style="margin-right: 2px;" src="@/assets/icon/email.png" alt="">
                                <span>{{ friendMessage.email }}</span>
                            </div>
                        </div>
                    </div>
                    <el-button style="margin-top: 20px;" @click="isConcern(friendMessage)"
                        v-if="isFriend == 3">关注</el-button>
                    <el-button style="margin-top: 20px;" v-if="isFriend == 2">对方已关注你</el-button>
                    <el-button style="margin-top: 20px;" v-if="isFriend == 1">已关注</el-button>
                    <el-button style="margin-top: 20px;" v-if="isFriend == 0">互相关注</el-button>
                </div>
                <div class="chat">

                </div>
            </div>
        </el-dialog> -->
    <FriendMessage
      :friendMessage="friendMessage"
      :isVisible="friendMessageDialogVisible"
      :isFriend="isFriend"
      @update:isVisible="handleDialogVisibility"
    />
    <!-- 待办的dialog -->
    <el-dialog
      v-model="toDoMessageDialogVisible"
      :title="toDoMessage.message"
      width="500"
      draggable
      v-loading="toDodialogloading"
    >
      <div v-if="(toDoMessage.followId != null) & (toDoMessage.type == 1)">
        <span style="margin-right: 2px"> 用户 </span>
        <span class="usernameClick" @click="usernameClick()">
          {{ toDoUserMessage.username }}
        </span>
        <span> 请求添加您为好友 </span>
      </div>
      <div v-if="(toDoMessage.followId != null) & (toDoMessage.type == 0)">
        <span style="margin-right: 2px"> 用户 </span>
        <span class="usernameClick" @click="usernameClick()">
          {{ toDoUserMessage.username }}
        </span>
        <span> 同意了您的好友请求 </span>
      </div>
      <div></div>
      <template #footer>
        <div class="dialog-footer" v-if="toDoMessage.status == 0">
          <div v-if="toDoMessage.type == 1">
            <el-button @click="toDoDispose(2, toDoMessage.id)">拒绝</el-button>
            <el-button
              @click="toDoDispose(1, toDoMessage.id, toDoUserMessage.id)"
              type="primary"
            >
              同意
            </el-button>
          </div>
          <div v-if="toDoMessage.type == 0">
            <el-button @click="disposeKnow(toDoMessage.id)" type="primary">
              我已知晓
            </el-button>
          </div>
        </div>
        <div v-if="toDoMessage.status == 1">
          <el-tag type="success" effect="dark" round> 同意 </el-tag>
        </div>
        <div v-if="toDoMessage.status == 2">
          <el-tag type="danger" effect="dark" round> 拒绝 </el-tag>
        </div>
      </template>
    </el-dialog>
    <!-- 发布新内容的dialog -->
    <el-dialog v-model="newVideoDialog" title="发布新视频" width="600">
      <div class="videoAddBox">
        <div class="videoAddItem">
          <span>视频描述:</span>
          <el-input
            v-model="formdata.synopsis"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 10 }"
            maxlength="300"
            show-word-limit
            placeholder="输入对视频的描述"
          >
          </el-input>
        </div>
        <div class="videoAddItem">
          <span>类型选择:</span>
          <el-radio-group v-model="formdata.type" size="large">
            <el-radio-button label="所有人可看" value="0" />
            <el-radio-button label="仅好友可看" value="1" />
          </el-radio-group>
        </div>
        <div class="videoAddItem" v-if="previewURL.length == 0">
          <span>添加视频:</span>
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :on-change="changeFile"
            :auto-upload="false"
          >
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </div>
        <div class="videoAddItem" v-else>
          <span>视频预览：</span>
          <div style="display: flex">
            <video
              style="
                width: 400px;
                height: 400px;
                background-color: #000;
                border: 2px solid #ddd;
              "
              controls
              :src="previewURL"
            ></video>
            <el-button type="danger" @click="removeVideo">删除视频</el-button>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="uploadVideo"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import router from "@/router";
import store from "@/store";
import axios from "axios";
import { ElMessage } from "element-plus/es";

import { watch, onMounted, ref } from "vue";
import FriendMessage from "@/components/FriendMessage.vue";

var token = localStorage.getItem("token");

const user = ref({});
const userTab = ref([]);
const friendList = ref([]);

const activeName = ref("first");
const toDOtab = ref("first");

const searchValue = ref("");
const searchUserList = ref([]);

const isFriend = ref("");
//好友功能dialog框
const friendMessageDialogVisible = ref(false);
const friendMessage = ref({});

const toDoList = ref([]);
const toDoMessageDialogVisible = ref(false);
//待处理
const pending = ref([]);
//已同意
const agreed = ref([]);
//已拒绝
const Rejected = ref([]);

const toDoUserMessage = ref({});

const toDoMessage = ref({});

const toDodialogloading = ref(true);

const newVideoDialog = ref(false);

function handleDialogVisibility(newVal) {
  friendMessageDialogVisible.value = newVal;
}
//视频上传组件需要
const formdata = ref({
  file: "",
  userId: localStorage.getItem("id"),
  synopsis: "",
  type: "0",
});

const previewURL = ref("");

async function uploadVideo() {
  if (formdata.value.file == null || formdata.value.file == "") {
    ElMessage.error("您还未上传视频");
    return;
  }
  // ?file='+formdata.value.file+'&userId='+localStorage.getItem('id')+'&type='+formdata.value.type+'&synopsis='+formdata.value.synopsis
  const res = await axios.post(
    "/api/video/add_video",
    {
      file: formdata.value.file,
      userId: formdata.value.userId,
      synopsis: formdata.value.synopsis,
      type: formdata.value.type,
    },
    {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }
  );
  if (res.data.code == 200) {
    ElMessage.success(res.data.message);
    newVideoDialog.value = false;
    location.reload();
  } else {
    ElMessage.error(res.data.message);
  }
  console.log(formdata.value);
}
function removeVideo() {
  (formdata.value.file = ""), (previewURL.value = "");
}

const changeFile = (uploadFile) => {
  if (
    [
      "video/mp4",
      "video/ogg",
      "video/flv",
      "video/avi",
      "video/wmv",
      "video/rmvb",
      "video/mov",
    ].indexOf(uploadFile.raw.type) == -1 //控制格式
  ) {
    ElMessage.error("请上传正确的视频格式");
  } else if (uploadFile.size / 1024 / 1024 > 50) {
    ElMessage.error("视频太大了，推荐视频大小为50MB以下");
  } else {
    previewURL.value = URL.createObjectURL(uploadFile.raw);
    formdata.value.file = uploadFile.raw;
  }
};

//-----------------------------------------------------------

//websocket------------------------------------------------------

var isConnect = true;

const todows = new WebSocket(
  "ws://localhost:8080/todo/" + localStorage.getItem("id")
); // 替换为你的WebSocket服务器地址

todows.onopen = () => {
  console.log("websocket已连接至服务器");
  isConnect = true;

  getToDoList();
  getFriendList();
};
todows.onclose = () => {
  console.log("websocket断开连接");
  isConnect = false;
};
todows.onerror = () => {
  console.log("websocket出现异常");
  isConnect = false;
};
todows.onmessage = () => {
  getToDoList();
  getFriendList();
};
setInterval(() => {
  if (todows.readyState === WebSocket.OPEN) {
    todows.send("heart");
  }
}, 55000);

// function reConnect() {
//     var count = 0;
//     if (isConnect) {
//         return;
//     }

//     if(todows){
//         todows.close;
//     }

//     setInterval(()=>{
//         count++;
//         todows.connect();
//         console.log("重连第"+count+"次")
//     },4000)
// }

//---------------------------------------------------------------
//做个关注操作
async function isConcern(value) {
  const res = await axios.post(
    "/api/fans/add_fans?masterId=" +
      localStorage.getItem("id") +
      "&followId=" +
      value.id
  );
  if (res.data.code == 200) {
    ElMessage.success(res.data.data);
    todows.send(value.id);
  } else {
    ElMessage.error(res.data.message);
  }
}
//处理待办---------------------------------------
async function toDoDispose(status, id, followId) {
  if (followId != undefined) {
    const res = await axios.post(
      "/api/todo/todo_dispose?id=" +
        id +
        "&masterId=" +
        localStorage.getItem("id") +
        "&followId=" +
        followId +
        "&status=" +
        status
    );
    if (res.data.code == 200) {
      todows.send(followId);
      getToDoList();
      getFriendList();
      ElMessage.success(res.data.message);
      toDoMessageDialogVisible.value = false;
    }
  } else {
    const res = await axios.post(
      "/api/todo/todo_dispose_NF?id=" +
        id +
        "&masterId=" +
        localStorage.getItem("id") +
        "&status=" +
        status
    );
    if (res.data.code == 200) {
      todows.send(followId);
      getToDoList();
      getFriendList();
      ElMessage.success(res.data.message);
      toDoMessageDialogVisible.value = false;
    }
  }
}

async function disposeKnow(toDoId) {
  const res = await axios.post(
    "/api/todo/todo_dispose_know?id=" +
      toDoId +
      "&masterId=" +
      localStorage.getItem("id")
  );
  if (res.data.code == 200) {
    ElMessage.success(res.data.message);
    getToDoList();
    toDoMessageDialogVisible.value = false;
  } else {
    ElMessage.error(res.data.message);
  }
}
//----------------------------------------------
function usernameClick() {
  friendMessage.value = toDoUserMessage.value;
  friendMessageDialogVisible.value = true;
}

async function toDialog(followId, id) {
  toDoMessageDialogVisible.value = true;
  if (followId != null) {
    const userres = await axios.get("/api/user/selectById_user?id=" + followId);
    if (userres.data.code == 200) {
      toDoUserMessage.value = userres.data.data;
      toDodialogloading.value = false;
    }
  }
  toDoList.value.forEach((item) => {
    if (item.id == id) {
      toDoMessage.value = item;
    }
  });
}

async function getToDoList() {
  const res = await axios.get(
    "/api/todo/todo_select_userid?userId=" + localStorage.getItem("id")
  );
  if (res.data.code == 200) {
    toDoList.value = res.data.data;
    pending.value = [];
    agreed.value = [];
    Rejected.value = [];
    toDoList.value.forEach((item) => {
      if (item.status == 0) {
        pending.value.push(item);
      }
      if (item.status == 1) {
        agreed.value.push(item);
      }
      if (item.status == 2) {
        Rejected.value.push(item);
      }
    });
  } else {
    console.log(res.data);
  }
}

async function openFriendDialog(friendId) {
  const res2 = await axios.get(
    "/api/fans/friend_isConcern?friendId=" +
      friendId +
      "&myId=" +
      localStorage.getItem("id")
  );
  if (res2.data.code == 200) {
    isFriend.value = res2.data.data;
  }

  friendMessageDialogVisible.value = true;
  const res = await axios.get("/api/user/selectById_user?id=" + friendId);
  if (res.data.code == 200) {
    friendMessage.value = res.data.data;
  }
}
async function searchUser() {
  searchUserList.value.length = 0;

  const izzeRes = await axios.get(
    "/api/user/user_select_izze?value=" + searchValue.value
  );
  if (izzeRes.data.code == 200) {
    searchUserList.value.push(...izzeRes.data.data);
  } else {
    ElMessage.error(izzeRes.data.message);
  }

  const usernameRes = await axios.get(
    "/api/user/user_select_username?value=" + searchValue.value
  );
  if (usernameRes.data.code == 200) {
    searchUserList.value.push(...usernameRes.data.data);
  }
}

async function getFriendList() {
  const res = await axios.get(
    "/api/fans/friend_select?id=" + localStorage.getItem("id")
  );
  if (res.data.code == 200) {
    friendList.value = res.data.data;
  }
}

function getUser() {
  axios
    .post("/api/login/return_id?token=" + token)
    .then((res) => {
      user.value = res.data.data;
    })
    .catch((err) => {
      console.log("error:", err.data);
    });
}

onMounted(() => {
  getUser();

  axios
    .get("/api/userTab/getTab_user", {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      userTab.value = res.data.data;
      getFriendList();
      getToDoList();
    })
    .catch((err) => {
      console.log(err.data);
    });
});

watch(
  () => store.getters.getUser,
  (o, v) => {
    getUser();
  }
);

function UserTabClick(id) {
  if (id == 1) {
    router.push({
      path: "/main/user_option",
    });
  }
  if (id == 2) {
  }
  if (id == 3) {
    localStorage.removeItem("token");
    localStorage.removeItem("id");
    ElMessage({
      message: "退出成功",
      type: "success",
    });
    todows.close();
    router.push("/");
  }
}
</script>

<style>
body {
  position: relative;
  overflow: hidden; /* 确保伪元素不会超出视口 */
  background-color: #000;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/src/assets/wangzhanbeijing.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: blur(50px); /* 设置模糊程度 */
  z-index: -1; /* 确保伪元素位于页面内容下方 */
}
</style>
<style lang="scss" scoped>
.userMessage {
  height: 50px;
  display: flex;
  align-items: center;
  color: #666;
}

.el-dropdown-menu {
  height: auto;
  width: 300px;
}

.el-container {
  height: 100vh;
  width: 100%;
}

.el-header {
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 51px;
  border-bottom: 1px #ddd solid;
  background-color: #ffffff00;

  .title {
    cursor: pointer;
    margin-left: -25px;
    display: flex;
    align-items: center;

    img {
      margin-top: -10px;
      width: 70px;
      height: 70px;
    }

    span {
      font-weight: 700;
      margin-left: -10px;
      margin-bottom: 5px;
    }
  }

  .avatar {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: auto;
    width: auto;

    .friend {
      margin-top: 8px;
      margin-right: 10px;
      cursor: pointer;
      height: 40px;
      width: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: box-shadow 0.3s, color 0.3s;
      border-radius: 5px;

      span {
        font-size: 12px;
      }
    }

    .friend:hover {
      color: #84848466;
    }

    .el-avatar {
      height: 40px;
      width: 40px;
      cursor: pointer;
    }
  }
}

.el-main {
  margin: 0;
  padding: 0;
  padding-top: 51px;
  height: 100%;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-main::-webkit-scrollbar {
  display: none;
}

.friendItem {
  padding-left: 8px;
  display: flex;
  align-items: center;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid #eee;
}

.friendItem:hover {
  background-color: #6ad0ff1b;
}

.searchUser {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

// .friendDialogBox {
//     width: 100%;
//     height: 500px;
//     display: flex;
//     justify-content: center;

//     .friendMessage {
//         display: flex;
//         flex-direction: column;
//         align-items: center;
//         width: 30%;
//         margin-right: 5px;

//         .friendMessageContext {
//             width: 80%;
//             margin-top: 30px;
//             border-bottom: 2px dashed #eee;

//             .friendMessageItem {

//                 display: flex;
//                 align-items: center;
//                 justify-content: space-between;
//                 margin-bottom: 10px;

//                 .friendMessageItemContext {
//                     img {
//                         height: 13px;
//                     }

//                     display: flex;
//                     align-items: center;
//                 }

//                 span {
//                     font-size: 12px;
//                     margin-right: 2px;
//                     margin-left: 2px;
//                 }
//             }
//         }

//     }

//     .chat {
//         width: 65%;
//         background-color: #eee;
//     }
// }

.usernameClick {
  cursor: pointer;
}

.usernameClick:hover {
  color: #3b6ba28d;
}

.ToDotag {
  margin-left: auto;
  margin-right: 30px;
}

.videoAddBox {
  display: flex;
  flex-direction: column;

  .videoAddItem {
    span {
      width: 80px;
      margin-bottom: 5px;
    }

    margin-top: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  background-color: #eee;
  border: 2px dashed #ddd;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
